<template>
    <div class="fillcontain">
        <el-form :model="formData" label-position="labelPosition" labelWidth="120px"
                 class="demo-form-inline" style="margin-left: 20px;margin-right: 20px">
            <el-row>
                <el-col span="12">
                    <el-form-item label="学生姓名">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.user.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select size="mini" v-bind:style="commonstyle" v-model="formData.user.sex"
                                   placeholder="请选择性别">
                            <el-option
                                v-for="item in sexList"
                                :key="item.type"
                                :label="item.name"
                                :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker size="mini" v-bind:style="commonstyle"
                                        v-model="formData.user.birthday"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        style="width: 150px"
                                        placeholder="开始日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="就读学校">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.user.educateschool"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="父亲姓名">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.user.father"
                                  placeholder="父亲姓名"></el-input>
                    </el-form-item>-->
                    <el-form-item label="父亲电话">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.user.fathertel"
                                  placeholder="父亲电话"></el-input>
                    </el-form-item>
                   <!-- <el-form-item label="母亲姓名">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.user.mother"
                                  placeholder="母亲姓名"></el-input>
                    </el-form-item>-->
                    <el-form-item label="母亲电话">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.user.mothertel"
                                  placeholder="目前电话"></el-input>
                    </el-form-item>
                    <el-form-item label="家庭住址">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.user.address"
                                  style="width: 400px"
                                  placeholder="家庭住址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item label="所属学校">
                        <el-select size="mini" v-bind:style="commonstyle" v-model="formData.user.schoolid"
                                   @change="schoolchange"
                                   placeholder="所属校区">
                            <el-option
                                v-for="item in schoolList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属老师" >
                        <el-select size="mini" v-bind:style="commonstyle" v-model="formData.user.eid"
                                   placeholder="所属老师">
                            <el-option
                                v-for="item in empsList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上课时段" v-if="attrdis([1])">
                        <el-select size="mini" v-bind:style="commonstyle"  @change="addPeriodTag"
                                   v-model="formData.chargeFee.periodid"
                                   placeholder="上课时段">
                            <el-option
                                v-for="item in periodList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-tag
                        v-for="tag in this.periods" v-if="attrdis([1])"
                        :key="tag"
                        style="margin-left: 5px"
                        size="medium"
                        closable="true"
                        @close="delperiod(tag)"
                        type=''>
                        {{tag.name}}
                    </el-tag>

                    <el-form-item v-if="attrdis([1])" label="学习舞种">
                        <el-checkbox-group  v-model="formData.chargeFee.subjectarray">
                            <el-checkbox v-for="sub in subjectList" :label="sub.id" :value="sub.id" :key="sub.id">
                                {{sub.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item v-if="attrdis([1])" label="xray卡类别">
                        <el-select size="mini"  v-model="formData.chargeFee.cardid" placeholder="xray卡类别">
                            <el-option
                                v-for="item in cardList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>

                        </el-select>
                    </el-form-item>

                    <el-form-item label="赠品信息" v-if="attrdis([1])">
                        <el-select size="mini" v-model="formData.chargeFee.giftid" placeholder="赠品信息">
                            <el-option
                                v-for="item in giftList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>

                        </el-select>
                    </el-form-item>

                    <el-form-item label="试课日期" v-if="attrdis([2])">
                        <el-date-picker size="mini"
                                        v-model="formData.user.trytime"
                                        align="right"
                                        type="date"
                                        style="width:150px"
                                        value-format="timestamp"
                                        placeholder="试课日期"
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="正式日期" v-if="attrdis([1])">
                        <el-date-picker size="mini"
                                        v-bind:style="commonstyle"
                                        v-model="formData.chargeFee.beginTime"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="正式上课日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="截至日期" v-if="attrdis([1])">
                        <el-date-picker size="mini" v-bind:style="commonstyle"
                                        v-model="formData.chargeFee.endTime"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="学习截至日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="交费日期" v-if="attrdis([1],'yuan')">
                        <el-date-picker size="mini"
                                        v-bind:style="commonstyle"
                                        v-model="formData.chargeFee.chargedate"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="交费日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="交费金额" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.chargeFee.chargecash"
                                  placeholder="现金交费金额"></el-input>
                    </el-form-item>
                    <el-form-item label="其他方式交费" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.chargeFee.otherCharge"
                                  placeholder="其他交费方式"></el-input>
                    </el-form-item>
                    <el-form-item label="交费类型" v-if="attrdis([1])">
                        <el-select size="mini" v-bind:style="commonstyle" v-model="formData.chargeFee.paytype"
                                   placeholder="选择交费类型">
                            <el-option
                                v-for="item in paytypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="本轮课时" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:style="commonstyle"
                                  v-model="formData.chargeFee.timesofclass"
                                  placeholder="本轮课时"></el-input>
                    </el-form-item>

                    <el-form-item label="缴费单据备注" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:style="commonstyle" v-model="formData.chargeFee.ordercomments"
                                  placeholder="缴费单据备注"></el-input>
                    </el-form-item>
                    <el-form-item label="原剩余钱数" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:readonly="readonly" v-bind:style="commonstyle"
                                  v-model="formData.userCharge.remaincash"
                                  placeholder="原剩余钱数"></el-input>
                    </el-form-item>
                    <el-form-item label="原剩余课时" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:readonly="readonly" v-bind:style="commonstyle"
                                  v-model="formData.userCharge.remaintimes"
                                  placeholder="原剩余课时"></el-input>
                    </el-form-item>
                    <el-form-item label="原交费总课数" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:readonly="readonly" v-bind:style="commonstyle"
                                  v-model="formData.userCharge.totalclass"
                                  placeholder="原交费总课数"></el-input>
                    </el-form-item>
                    <el-form-item label="原交费总次数" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:readonly="readonly" v-bind:style="commonstyle"
                                  v-model="formData.userCharge.totaltimes"
                                  placeholder="原交费总次数"></el-input>
                    </el-form-item>
                    <el-form-item label="原交费总金额" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:readonly="readonly" v-bind:style="commonstyle"
                                  v-model="formData.userCharge.totalcash"
                                  placeholder="原交费总金额"></el-input>
                    </el-form-item>
                    <el-form-item label="原课时单价" v-if="attrdis([1])">
                        <el-input size="mini" v-bind:readonly="readonly" v-bind:style="commonstyle"
                                  v-model="formData.userCharge.singlecash"
                                  placeholder="原课时单价"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-col offset="10" :span="10">
                <el-button @click="addchargeClick(opertype)" type="primary">学生交费<i
                    class="el-icon-upload el-icon--right"></i></el-button>
            </el-col>
        </el-form>
    </div>
</template>
<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {getuserDetail, getUserCount, adduserCharge,toTestUser,updateUser} from '@/api/getData'
    import ElRow from "element-ui/packages/row/src/row";
    import ElCol from "element-ui/packages/col/src/col";
    import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item.vue";

    export default {
        data() {
            return {
                opertype:1,
                readonly: true,
                periods: [],
                uid: '',
                chargetype: '',
                usertype: null,
                empsList: [],
                commonstyle: {
                    width: '220px',
                },
                formData: {
                    user: {},
                    chargeFee: {
                        subjectarray:[],
                        periodid: '',
                        chargedate: '',
                        chargecash: '0',
                        paytype: '',
                        otherCharge: '0',
                        timesofclass: '',
                        timesofweek: '',
                        beginTime: '',
                        endTime: '',
                        chargeStatus: '1'

                    },
                    userCharge: {},


                },
                activityPanel: '',
            }
        },
        components: {
            ElFormItem,
            ElCol,
            ElRow
        },
        computed: {
            ...mapGetters(['adminInfo','subjectList','cardList', 'giftList', 'schoolList', 'channelList', 'periodList', 'empschoolMap', 'sexList', 'paytypeList'])
        },
        watch: {
            '$route'(to, from) {
                this.uid = this.$route.params.uid;
                this.chargetype = this.$route.params.chargetype;
                this.opertype=this.$route.params.opertype;

            }
        },
        mounted() {
            this.uid = this.$route.params.uid;
            this.chargetype = this.$route.params.chargetype;
            this.opertype=this.$route.params.opertype;
            if (this.giftList == null) {
                this.getGiftList();
            }
            //alert(this.uid);
            if (this.periodList.length == 0) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },
        created() {
            this.uid = this.$route.params.uid;
            this.initData();

        },
        methods: {
            ...mapActions(['getGiftList', 'getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool','updateUser']),

            attrdis(v,yuan){
                var type=this.opertype;
                var obj = v.find((item) => {
                    return type == item;
                })
                /*if(yuan=='yuan'){
                    alert('yuan:'+obj);
                }*/
                if(obj!=null) return true;
                return false;

            },

            addPeriodTag(id) {
                var obj = this.periodList.find((item) => {
                    return id == item.id;
                })
                var name = obj.name;
                this.periods.push({id: id, name: name});
                // alert(JSON.stringify(this.periods));
            },
            delperiod(tag) {
                var index = null;
                for (var i = 0; i < this.periods.length; i++) {
                    if (tag.id == this.periods[i].id) {
                        index = i;
                        break;
                    }
                }
                this.periods.splice(index, 1);
            },
            getEndtime() {
                var begin = this.formData.chargeFee.beginTime;
                var tclass = this.formData.chargeFee.timesofclass;
                var tweek = this.formData.chargeFee.timesofweek;
                if (tclass == '') tclass = 1
                if (tweek == '') tweek = 1;
                var endtime = begin + ((tclass / tweek) * 3600 * 24 * 7 * 1000 - 1);
                this.formData.chargeFee.endTime = endtime;
            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            async initData() {
                const res = await getuserDetail({"data": {"uid": this.uid}})

                if (res.success == true) {
                    this.formData.user = res.data.user;
                    this.formData.userCharge = res.data.userCharge;
                    this.schoolchange(this.formData.user.schoolid);
                }
                else {
                    alert("获取用户信息失败!")
                }
            },
            async toTest(){
                this.formData.user.usertype=2;
                const res = await updateUser({"data": this.formData.user});
                if (res.success == true) {
                    this.$message({
                        type: 'success',
                        message: '转试听生成功'
                    });
                }

            },

            async addchargeClick(type) {
                if(type==2)
                {
                    this.toTest();
                    return;
                }

                this.formData.userCharge = null;
                //alert(JSON.stringify(this.formData));
                this.formData.chargeFee.chargetype = this.chargetype;
                var temp = [];
                this.periods.forEach((item) => {
                    temp.push(item.id);
                });
                this.formData.chargeFee.periodarray = temp;
                if(this.adminInfo!=null)
                    this.formData.chargeFee.operatorid=this.adminInfo.id;

                if(this.formData.chargeFee.cardid!=null) {
                    var card = this.cardList.find((item) => {
                        return item.id == this.formData.chargeFee.cardid;
                    })

                    this.formData.chargeFee.srccharge = card.charge;
                    this.formData.chargeFee.giftnum=1;
                }


                //alert(JSON.stringify(this.formData));
                //return;
                const res = await adduserCharge({"data": this.formData});
                if (res.success == true) {
                    this.$message({
                        type: 'success',
                        message: '续费成功'
                    });
                    var chargefee = res.data;
                    this.$router.push({name: '/feeprint', params: {chargefee: chargefee}});
                }
            },

        }
    }
</script>
